$name: #{'.' + $namespace + '-progress'};

#{$name} {
  --progress-progress-color: var(--primary-background-color);
  --progress-progress-background-color: var(--primary-stroke-color);
  --progress-striped-color: #{rgba($color: #000, $alpha: .1)};
  --progress-progress-height: 16rpx;
  --progress-text-gap: 8rpx;
  --progress-transition: .3s linear;
  display: flex;
  align-items: center;
  position: relative;

  &::before,
  &::after,
  &__text {
    display: none;
  }

  &__progress {
    position: relative;
    border-radius: 100rpx;
    height: var(--progress-progress-height);
    flex: auto;
    background: var(--progress-progress-background-color);

    &-color {
      position: relative;
      border-radius: inherit;
      width: calc(var(--progress-percentage) * 1%);
      max-width: 100%;
      height: 100%;
      background: var(--progress-progress-color);
      transition: var(--progress-transition);
    }
  }

  &.show-text {
    $fs: calc(var(--progress-progress-height) * .9);

    &::before,
    &::after {
      font-size: $fs;
      line-height: $fs;
      margin: 0 var(--progress-text-gap);
    }

    &::before {
      content: attr(data-current);
      margin-left: 0;
    }

    &::after {
      content: attr(data-total);
      margin-right: 0;
    }

    #{$name}__text {
      display: flex;
      align-items: center;
      position: absolute;
      font-size: $fs;
      line-height: $fs;
      width: 100%;

      &-percentage {
        display: none;
      }
    }
  }

  &.show-percentage {
    #{$name}__text {
      &>:nth-child(n) {
        display: none;
      }

      #{$name}__text-percentage {
        display: block;
      }
    }
  }

  &--center {
    #{$name}__text {
      justify-content: center;
    }
  }

  &--top {
    #{$name}__text {
      bottom: calc(100% + var(--progress-text-gap));
      justify-content: center;
    }
  }

  &--bottom {
    #{$name}__text {
      top: calc(100% + var(--progress-text-gap));
      justify-content: center;
    }
  }

  &--x {

    &::before,
    &::after {
      display: block;
    }

    #{$name}__text {
      display: none;
    }
  }

  &.is-striped {

    #{$name}__progress {
      &-striped {
        $striped-color: var(--progress-striped-color);
        position: absolute;
        @include locate();
        border-radius: inherit;
        $count: 3;
        $list: ();
        $o: 0;
        $gap: calc(100% / ($count * 2));

        @for $i from 1 through $count {
          $list: append($list, $striped-color ($i - 1 + $o) * $gap ($i + $o) * $gap, comma);
          $list: append($list, transparent ($i + $o) * $gap ($i + 1 + $o) * $gap, comma);
          $o: $o + 1;
        }

        background: linear-gradient(117deg, $list);
        background-size: var(--progress-progress-height) var(--progress-progress-height);
        background-position: 0 0;
      }
    }
  }

  &.is-striped-flow {

    #{$name}__progress {
      &-striped {
        @keyframes move {
          0% {
            background-position-x: 0%;
          }

          100% {
            background-position-x: 100%;
          }
        }

        animation: move calc(var(--progress-percentage) * 100ms) linear infinite;
      }
    }
  }
}